<template>
  <div class="avatar-header fx-h-c bg-w">
    <img class="br-5 cs" :src="user.avatar" alt="" />
    <div class="right">
      <h3 class="name">{{ user.username }}</h3>
      <div class="occapt"><a-icon type="calendar" /> {{ user.job }}</div>
      <div class="bot fx-h-c cs">
        <span>+ 你有哪些爱好</span>
        <a-button
          ><router-link :to="{ name: 'changeUserMsg' }"
            >编辑个人资料</router-link
          ></a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getSessionStorage, parse } from "@/utils/utils";
import { getUserDetail } from "@/api/user";
export default {
  name: "AvatarHeader",
  data() {
    return {
      user: {},
    };
  },
  async created() {
    const i = getSessionStorage("cid");
    let id;
    if (i) {
      id = parse(i).id;
    }
    const { data } = await getUserDetail(id);
    setTimeout(() => {
      this.$bus.$emit("getUsername", data.username);
    }, 500);
    this.user = data;
  },
};
</script>

<style lang="scss" scoped>
.avatar-header {
  height: 15.7rem;
  padding: 1rem 2rem;
  img {
    width: 8rem;
    height: 8rem;
    margin-right: 2rem;
  }
  .right {
    .name {
      font-weight: bold;
      font-size: 2.4rem;
    }
    .occapt {
      margin-top: 1rem;
    }
    .bot {
      color: #4a68ad;
      width: 56rem;
      justify-content: space-between;
    }
  }
}
</style>